import React, { Component } from 'react';
import { List, InputItem, Toast, Picker } from 'antd-mobile';
import { createForm } from 'rc-form';
import Head from 'views/component/head/head';
import RadioComponent from 'views/component/radio/radio';
import { loginApi } from 'js/api/login';
import api from 'js/api/index';
import './register.scss';
import { i18n } from 'js/core/i18n';

let jobList = [{
	label: i18n.get('督导'),
	value: '督导',
}, {
	label: i18n.get('店主'),
	value: '店主',
}, {
	label: i18n.get('经理'),
	value: '经理',
}, {
	label: i18n.get('其他'),
	value: '其他',
}];

class Register extends Component {
	state = {
		phoneText: i18n.get('获取验证码'),
		err: {},
		sendState: false,
		timer: null,
		isPhone: false
	}
	componentDidMount() {

	}

	// 表单提交
	submit = () => {
		this.props.form.validateFields((err, values) => {
			if (!err) {
				// 请求接口
				values.Job = values.Job[0];
				values.language = window.localStorage.getItem('defaultLanguage') || 'zh-CN';
				if (!values.language || values.language === 'undefined') {
					values.language = 'zh-CN'
				}
				api('/Home/Register', values, 'POST').then(res => {
					if (res.code === 1) {
						Toast.success(i18n.get('成功'), 2)
						window.FW.emit('back');
					} else {
						Toast.fail(res.message, 2)
					}
				});
			}
			this.setState({ err: err || {} });
		});
	}
	// 发送验证码
	sendPhone = () => {
		this.setState({ sendState: true, phoneText: i18n.get('验证码已发送') });
		this.props.form.validateFields(['userphone'], (err, values) => {
			let language = window.localStorage.getItem('defaultLanguage');
			if (!language || language === 'undefined') {
				language = 'zh-CN'
			}
			if (!err) {
				api('/Home/SendCode', { phone: values.userphone, SendType: 1, language: language }).then(res => {
					this.getTime();
				});
			} else {
				Toast.fail(err.userphone.errors[0].message, 2);
			}
		});

	}
	// 倒计时
	getTime = () => {
		let times = 60;
		this.state.timer = setInterval(() => {
			times--;
			if (times <= 0) {
				clearInterval(this.state.timer);
				times = 60;
				this.setState({ sendState: false, phoneText: i18n.get('获取验证码') });
			} else {
				this.setState({ phoneText: times + i18n.get('秒后重试') });
			}
		}, 1000);
	}
	// 生命周期   组件销毁前调用
	componentWillUnmount() {
		clearInterval(this.state.timer);
	}
	render() {
		const { getFieldProps, getFieldError } = this.props.form;
		let { err } = this.state;
		return <div id="register-box">
			<div className="register-container">
				<List>
					<InputItem
						className="mb20"
						{...getFieldProps('username', {
							rules: [
								{ required: true, message: ' ' },
								{
									validator: (rule, value, callback) => {
										if (value && value.length < 6) {
											callback('输入的用户名长度不够');
										} else {
											callback();
										}
									}
								}
							],
						})}
						placeholder={i18n.get("用户名(6-16字符)")}
						error={err.username}
						maxLength="16"
						onFocus={() => { delete err.username; this.setState({}); }}
					> <div className="icon-box username"></div> </InputItem>
					<InputItem
						className="mb20"
						{...getFieldProps('Email', {
							rules: [
								{ required: true, type: 'email', message: ' ' }
							],
						})}
						error={err.Email}
						placeholder={i18n.get("邮箱地址")}
						onFocus={() => { delete err.Email; this.setState({}); }}
					><div className="icon-box email"></div></InputItem>
					<InputItem
						className="mb20"
						{...getFieldProps('userphone', {
							rules: [
								{ required: true, message: i18n.get('请输入正确的手机号'), pattern: /1[0-9]{10}$/ },
							],
						})}
						error={err.userphone}
						placeholder={i18n.get("手机")}
						onFocus={() => { delete err.userphone; this.setState({}); }}
					><div className="icon-box mobile"></div></InputItem>
					<div className="flex">
						<InputItem
							className="mb20"
							{...getFieldProps('testcode', {
								rules: [{ required: true, type: 'string' }],
							})}
							error={err.testcode}
							placeholder={i18n.get("输入验证码")}
							className="flex-col-8"
							onFocus={() => { delete err.testcode; this.setState({}); }}
						><div className="icon-box test"></div></InputItem>
						<div className="flex-g-1">
							<button type="buttom" className="btn btn-test fs24" onClick={this.sendPhone}>{this.state.phoneText}</button>
						</div>
					</div>
					<InputItem
						className="mb20"
						type="password"
						{...getFieldProps('pwd', {
							rules: [{ required: true }, {
								validator: (rule, value, callback) => {
									const form = this.props.form;
									if (value) {
										form.validateFields(['redpwd'], { force: true }); // 给regpassword设置force
									}
									callback();
								}
							}],
						})}
						error={err.pwd}
						placeholder={i18n.get("输入密码")}
						onFocus={() => { delete err.pwd; this.setState({}); }}
					><div className="icon-box password"></div></InputItem>
					<InputItem
						className="mb20"
						type="password"
						{...getFieldProps('redpwd', {
							rules: [{ required: true }, {
								validator: (rule, value, callback) => {
									const form = this.props.form;
									if (value && !Object.is(value, form.getFieldValue('pwd'))) {
										callback('输入的密码不一致！');
									} else {
										callback();
									}
								}
							}],
						})}
						error={err.redpwd}
						placeholder={i18n.get("再次输入密码")}
						onFocus={() => { delete err.pwd; this.setState({}); }}
					><div className="icon-box password"></div></InputItem>
					<InputItem
						className="mb20"
						{...getFieldProps('GroupName', {
							rules: [
								{ required: true, message: '请输入集团/客户名称' },
							],
						})}
						error={err.userphone}
						placeholder={i18n.get("集团/客户名称")}
						onFocus={() => { delete err.userphone; this.setState({}); }}
					><div className="icon-box home"></div></InputItem>
					<Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} extra={i18n.get("请选择职位")}
						data={jobList}
						{...getFieldProps('Job', {
							initialValue: ['督导'],
							rules: [
								{ required: true },
							],
						})}
						cols={1}
					>
						<List.Item arrow="horizontal"><div className="icon-box user"></div></List.Item>
					</Picker>
					{/* <div className="mt25">
						<RadioComponent place="同意“服务条款”和“隐私权相关政策”"
							{...getFieldProps('flag', {
								valuePropName: 'data',
								getValueFromEvent: (value) => { return value.data; },
								initialValue: false
							}) } />
					</div> */}
				</List>
				<div className="login-btn">
					<button className="btn btn-primary login-sty" onClick={this.submit}>{i18n.get('注册')}</button>
				</div>
			</div>
		</div>;
	}
}

export default createForm()(Register);
